<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html,
        body {
            margin-left: 150px;
        }
        
        .input-name {
            width: 100px;
        }
        
        .input-score {
            width: 100px;
        }
        
        .input-num {
            width: 100px;
        }
        
        table {
            width: 600px;
            border-collapse: collapse;
        }
        
        tr,
        td {
            width: 200px;
            text-align: center;
            border: 1px solid black;
        }
    </style>
    <script>
        var shopping = [{
            name: "电饭煲",
            score: 100,
            num: 1
        }, {
            name: "电视机",
            score: 70,
            num: 2
        }, {
            name: "抽油烟机",
            score: 90,
            num: 3
        }, {
            name: "微波炉",
            score: 50,
            num: 5
        }]
        window.onload = function() {
            var tbody = document.querySelector("tbody");
            var content = "";
            for (var i = 0; i < shopping.length; i++) {
                content = content + "<tr><td>" + shopping[i].name + "</td><td>" + shopping[i].score + "</td><td>" + shopping[i].num + "</td></tr>";
            }
            tbody.innerHTML = content;

            var inputName = document.querySelector(".input-name");
            var inputScore = document.querySelector(".input-score");
            var inputNum = document.querySelector(".input-num");
            var btnAdd = document.querySelector(".btn-add");
            btnAdd.addEventListener("click", function(e) {
                if (inputName.value === "") {
                    return;
                }

                if (inputScore.value === "") {
                    return;
                }

                if (inputNum.value === "") {
                    return;
                }

                var content = tbody.innerHTML;
                content = content + "<tr><td>" + inputName.value + "</td><td>" + inputScore.value + "</td><td>" + inputNum.value + "</td></tr>"

                var temp = {}
                temp.name = inputName.value;
                temp.score = inputScore.value;
                temp.num = inputNum.value;
                tbody.innerHTML = content;
            })
            var swap = function(oldIndex, newIndex) {
                var temp = shopping[oldIndex];
                shopping[oldIndex] = shopping[newIndex];
                shopping[newIndex] = temp;
            }

            var showList = function() {
                var content = "";
                for (var i = 0; i < shopping.length; i++) {
                    content = content + "<tr><td>" + shopping[i].name + "</td><td>" + shopping[i].score + "</td><td>" + shopping[i].num + "</td></tr>";
                }
                tbody.innerHTML = content;
            }
            var btnSortD = document.querySelector(".btn-sort-d");
            btnSortD.addEventListener("click", function(e) {
                console.log(123);
                for (var i = 0; i < shopping.length; i++) {
                    var max = shopping[i].score;
                    var maxIndex = i;
                    for (var j = i + 1; j < shopping.length; j++) {
                        if (shopping[j].score > max) {
                            max = shopping[j].score;
                            maxIndex = j;
                        }
                    }
                    if (maxIndex != i) {
                        swap(i, maxIndex);
                    }
                    showList();

                }
                console.log(shopping);
            })
            var swap = function(oldIndex, newIndex) {
                var temp = shopping[oldIndex];
                shopping[oldIndex] = shopping[newIndex];
                shopping[newIndex] = temp;
            }

            var showList = function() {
                var content = "";
                for (var i = 0; i < shopping.length; i++) {
                    content = content + "<tr><td>" + shopping[i].name + "</td><td>" + shopping[i].score + "</td><td>" + shopping[i].num + "</td></tr>";
                }
                tbody.innerHTML = content;
            }
            var btnLongD = document.querySelector(".btn-long-d");
            btnLongD.addEventListener("click", function(e) {
                console.log(123);
                for (var i = 0; i < shopping.length; i++) {
                    var max = shopping[i].score;
                    var maxIndex = i;
                    for (var j = i + 1; j < shopping.length; j++) {
                        if (shopping[j].score < max) {
                            max = shopping[j].score;
                            maxIndex = j;
                        }
                    }
                    if (maxIndex != i) {
                        swap(i, maxIndex);
                    }
                    showList();

                }
                console.log(shopping);
            })


            //搜索
            var btnSearch = document.querySelector(".btn-search");
            var inputSearch = document.querySelector(".input-search");
            btnSearch.addEventListener("click", function(e) {
                var content = "";
                var ul = document.querySelector("ul")
                for (var i = 0; i < shopping.length; i++) {
                    if (inputSearch.value === shopping[i].name) {
                        console.log(shopping[i].name);
                        content = content + "<li>" + shopping[i].name + "</>"
                    }
                    ul.innerHTML = content;
                }
            })
        }
    </script>
</head>

<body>

    <table>
        <thead>
            <tr>
                <th>商品名:</th>
                <th>价格:</th>
                <th>数量:</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>

    商品名:
    <input type="text" class="input-name"> 价格:
    <input type="text" class="input-score"> 数量:
    <input type="text" class="input-num">
    <button class="btn-add">添加</button>
    <br/>
    <button class="btn-sort-d">倒序排列成绩</button>
    <button class="btn-long-d">正序排列成绩</button>
    <br>
    <input type="text" class="input-search">
    <button class="btn-search">搜索</button>
    <ul>

    </ul>

</body>

</html>